<!--贴片数量弹框-->
<template>
  <el-dialog
    :title="$t('bom.Pleaseselectthenumbe')"
    v-model="props.modelValue"
    width="300px"
    height="404px"
    :before-close="onClose"
  >
    <div class="num-list">
      <ul>
        <li class="num-list-item" v-for="item in numList" :key="item" @click="getNumItem(item)">
          {{ item }}
        </li>
      </ul>
    </div>
    <p class="m-t-16">{{ $t('bom.Otherquantities') }}</p>
    <el-input
      class="m-t-16"
      v-model="num"
      :placeholder="$t('bom.Pleaseenterthenumber')"
      v-number
      :maxlength="8"
    />
    <div class="footer m-t-16">
      <el-button type="primary" @click="handleConfirm">{{ $t('smt.Define') }}</el-button>
      <el-button @click="onClose">{{ $t('smt.Cancel') }}</el-button>
    </div>
  </el-dialog>
</template>
<script setup>
import { ref, reactive } from 'vue';
import { uploadDocFile } from '../../server/api/file';
import { useRouter } from 'vue-router';
const numList = reactive([2, 5, 10, 15, 20, 25, 30, 50, 75]);
const num = ref('');
const router = useRouter();
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  flieData: {
    type: Object,
    default: {},
  },
  fileType: {
    type: Number,
  },
});
const emits = defineEmits(['update:modelValue', 'confirm']);

/**
 * 确认请求数据解析文件
 */
const handleConfirm = () => {
  if (!num.value) {
    ElMessage.success(t('mall.enter_smt_quantity'));
    return;
  }
  emits('confirm', num.value);
  onClose();
  // const obj = {
  //   fileType: props.fileType,
  //   batchYearLimit: 0, // 接受批次(默认0 不限)
  //   isUseAlternative: 1, // 是否接受替(1接受，2不接受 默认1）
  //   smtLayer: 1, // 贴片层(1全贴，2顶层，3底层,默认1全贴)
  //   quantity: num.value,
  //   file: props.flieData,
  // };
  // uploadDocFile(obj).then((res) => {
  //   console.log('res', res);
  //   if (res.code === 200) {
  //     ElMessage.success(t('mall.upload_successful'));
  //     emit('getFileUploadRequestValue', res.data);
  //   } else {
  //     ElMessage.error(res.msg);
  //   }
  //   emit('getModea', false);
  // });
};

// 关闭弹窗
const onClose = () => {
  emits('update:modelValue', false);
};

const getNumItem = (item) => {
  num.value = item;
};
</script>

<style lang="scss" scoped>
.m-t-16 {
  margin-top: 16px;
}
.num-list {
  width: 100%;
  height: 100%;
  ul {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 6px;
    .num-list-item {
      width: 56px;
      height: 29px;
      line-height: 29px;
      text-align: center;
      border-radius: 4px;
      background: #f0f0ff;
      cursor: pointer;
    }
  }
}
.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 14px;
}
</style>
